extends layout

block content
    link(rel='stylesheet', href='/stylesheets/showLoading.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js')
    .header
        img.logo(src='/images/logo.jpg')
        .info
            img.avatar(src='/images/avatar.png')
            .name=name
            .split |
            .logout(@click='onLogout') 退出登录
    .content
        .rightPanel
            .con
                .tweet-title
                    .label 文章标题
                    input.input-info.name(placeholder="输入文章标题",v-model="tweet.title")
                .tweet-con
                .tweet-con-op
                    button.button-red.del(@click="onDel") 删除
                    button.button-blue.save(@click="onSave") 保存
    .dialog
        .dialog-header
        .dialog-content
            .text.title
            .text.des
            .op-content
                button.ok(@click="onOk") OK
                button.cancel(@click="onCancel") Cancel
    .toast.toast-error error


    script.
        function GetUrlParam(paraName) {
            var url = document.location.toString();
            var arrObj = url.split("?");

            if (arrObj.length > 1) {
                var arrPara = arrObj[1].split("&");
                var arr;

                for (var i = 0; i < arrPara.length; i++) {
                    arr = arrPara[i].split("=");

                    if (arr != null && arr[0] == paraName) {
                        return arr[1];
                    }
                }
                return "";
            } else {
                return "";
            }
        }

        var gVue;
        var gEditor;
        $(document).ready(function () {
            gVue = new Vue({
                el: 'body',
                data: {
                    tweet: !{JSON.stringify(tweet)}
                },
                methods: {

                    showError: function (msg) {
                        $(".toast-error").text(msg).fadeIn(500).delay(2000).fadeOut(1000);
                    },
                    showIndicator: function (str) {
                        var target = $(str ? str : '.rightPanel');
                        target.showLoading();

                    },
                    hideIndicator: function (str) {
                        var target = $(str ? str : '.rightPanel');
                        target.hideLoading();
                    },
                    showDialog: function (title, des, callback) {
                        $(".dialog-content .title").text(title)
                        $(".dialog-content .des").text(des)
                        this.dialogCallback = callback;
                        $(".dialog").fadeIn(200);
                    },
                    hideDialog: function () {
                        $(".dialog-header").text("")
                        this.dialogCallback = null;
                        $(".dialog").fadeOut(200);
                    },
                    onOk: function () {
                        if (this.dialogCallback) {
                            this.dialogCallback()
                        }
                        this.hideDialog()
                    },
                    onCancel: function () {
                        this.hideDialog()
                    },
                    onDel: function () {
                        var vue = this;
                        var tid = GetUrlParam("tid")
                        if (tid != null && tid > 0) {
                            this.showIndicator();
                            $.get('/api/tweet/delete', {tid: tid}, function (result) {
                                if (result.code == 302) {
                                    window.location.href = result.url;
                                } else {
                                    vue.showError(result.message)
                                }
                            });
                        }
                    },
                    onSave: function () {
                        var vue = this;
                        var tid = GetUrlParam("tid")
                        var content = gEditor.txt.html()
                        var summary = gEditor.txt.text()
                        var imgEs = $(gEditor.txt.html()).find('img')
                        var images = []
                        imgEs.each(function (index, img) {
                            images.push($(img).attr('src'))
                        })
                        var update = tid != null && tid > 0
                        if (vue.tweet.title != null && vue.tweet.title.length > 0 && content != null && content.length > 0 && content != '<p><br></p>') {
                            if (images.length > 0) {
                                this.showIndicator();
                                $.post('/api/tweet/add', {
                                    tid: tid,
                                    title: vue.tweet.title,
                                    content: content,
                                    summary: summary,
                                    images: images.join(";"),
                                    update: update
                                }, function (result) {
                                    vue.hideIndicator()
                                    vue.showError(result.message)
                                    if (!update) {
                                        setTimeout(function () {
                                            if (result.code == 302) {
                                                window.location.href = result.url;
                                            }
                                        }, 500)
                                    }
                                });
                            } else {
                                vue.showError("请添加图片")
                            }

                        } else {
                            vue.showError("请输入标题和内容")
                        }


                    },

                    onLogout: function () {
                        var vue = this;
                        $.get('/api/user/logout', function (result) {
                            if (result.code == 302) {
                                window.location.href = result.url;
                            } else {
                                vue.showError(result.message)
                            }
                        });
                    }
                }
            });
            var E = window.wangEditor
            gEditor = new E('.tweet-con')
            // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
            gEditor.customConfig.uploadImgServer = '/api/upload'
            gEditor.customConfig.uploadImgTimeout = 60000
            gEditor.create()

            if (gVue.tweet.content != null && gVue.tweet.content.indexOf("http") > -1) {
                gVue.showIndicator();
                $.get(gVue.tweet.content, function (result) {
                    gVue.hideIndicator()
                    gEditor.txt.html($($(result).siblings('.content')).html())
                });
            }

        })


